<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
    <!-- <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.159.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.159.0/examples/jsm/"
            }
        }
    </script> -->
    <script type="importmap">
        {
            "imports": {
                "three": "./js/three/three.module.js",
                "three/addons/": "./js/three/examples/jsm/"
            }
        }
    </script>

    <style>
        .input {
            position: absolute;
            left: 50px;
            top: 50px;
        }

        .input>input {
            width: 300px;
            line-height: 38px;
            height: 38px;
            border: 1px solid #ddd;
            padding-left: 10px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="input">
        <span>点/线/面</span>:
        <input type="text" id="input" />
    </div>
    <script type="module">

        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        let camera, scene, renderer;
        //基础对象
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.set(50, 50, 50);
        camera.updateProjectionMatrix();
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.minDistance = 5;
        controls.maxDistance = 300;
        controls.update()
        scene = new THREE.Scene();

        // 环境光
        const light = new THREE.AmbientLight(0x404040); // soft white light
        scene.add(light);
        //坐标轴
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        //grid
        const size = 10;
        const divisions = 10;
        const gridHelper = new THREE.GridHelper(size, divisions);
        scene.add(gridHelper);


        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();


        function handleInput() {
            var ele = document.getElementById("input");
            var val = ele.value;
            if (!val) return;
            if (val.length > 0 && val[0] == '(') {
                var arr = val.replace("(", "").replace(")", "").split(',');
                val = JSON.stringify({ X: arr[0], Y: arr[1], Z: arr[2] });
            }
            var obj = JSON.parse(val);
            if (Object.keys(obj).includes("X") || Object.keys(obj).includes("Y")) {
                //点
                const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
                const material = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.5 });
                const cube = new THREE.Mesh(geometry, material);
                cube.position.set(obj.X, obj.Y, obj.Z);
                scene.add(cube);
            } else if (Array.isArray(obj)) {
                //线或面
                const material = new THREE.LineBasicMaterial({
                    color: 0x0000ff
                });

                const points = [];
                for (let i = 0; i < obj.length; i++) {
                    points.push(new THREE.Vector3(obj[i].X, obj[i].Y, obj[i].Z));
                }
                const geometry = new THREE.BufferGeometry().setFromPoints(points);
                const line = new THREE.LineLoop(geometry, material);
                scene.add(line);
            }
            ele.value = "";
        }
        document.getElementById("input").addEventListener("input", handleInput);
    </script>
</body>

</html>